import React, { Component } from 'react'
// 属性的强校验
import PropTypes from 'prop-types' 


class TodoItem extends Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 提升性能，减少无谓的dom更新
    return nextProps.content !== this.props.content
  }
  render() {
    console.log('child render')
    const { content } = this.props
    return (
      <li onClick={this.handleClick}>
        {/* dangerouslySetInnerHTML={{__html: content}} */}
        {content}

      </li>
    )
  }

  

  handleClick() {
    const { deleteItem, index } = this.props
    deleteItem(index)
  }
}

TodoItem.propTypes = {
  test: PropTypes.string.isRequired,
  content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  deleteItem: PropTypes.func,
  index: PropTypes.number
}

// 设置默认值
TodoItem.defaultProps = {
  test: 'hello world'
}

export default TodoItem
